<script setup lang="ts">
import {useGrade} from "../hooks/useGrade";

const {graderPng} = useGrade()
const {grade} = defineProps<{
  grade: number
}>()

</script>

<template>
  <div class="bar-box">
    <div class="bar-left">
      <el-image class="img-bar" :src="graderPng"></el-image>
    </div>
    <div class="bar-center">
      <el-text class="text-grade">
        当前创作者等级：Lv{{ grade }}
      </el-text>
    </div>
    <div class="bar-right">
      <div class="grade-line-box">
        <el-steps style="width: 100%" :active="grade" align-center>
          <el-step title="Lv 1"/>
          <el-step title="Lv 2"/>
          <el-step title="Lv 3"/>
          <el-step title="Lv 4"/>
          <el-step title="Lv 5"/>
          <el-step title="Lv 6"/>
          <el-step title="Lv 7"/>
          <el-step title="Lv 8"/>
          <el-step title="Lv 9"/>
<!--          <el-step title="Lv 10"/>-->
        </el-steps>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
@import "style/GradeBar";
</style>
